<template>
	<view class="clientWrapper">
		<view class="clientSearchItem">
			<input class="search clientSearch" :placeholder="inputplaceholder" v-model="inputStr"></input>
			<button class="button searchBt" @tap="search()">搜索</button>
		</view>
		<view class="container" v-show="isTable">
			<!-- 表格外层 -->
			<view class="tdHeader" :style="{width:allWidth+'px'}">
				<view class="tdTh" v-for="(item,index) in clientTitleList" :key="item.name" :style="{width:clientSettingWidthList[index] + 'px'}">
					{{item.name}}
				</view>
			</view>
			<view class="tdContain" :style="{width:allWidth +'px',height:tdHeight+'px'}">
				<view class="tdItems" v-for="(item,index) in clientList" :key="index" @tap="selectClient(index)">
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[0] + 'px'}">{{index+1}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[1] + 'px'}">{{item.ClientName}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[2] + 'px'}">{{item.ClientCode}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[3] + 'px'}">{{item.Address}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[4] + 'px'}">{{item.Phone}}</view>
				</view>
			</view>
		</view>
		<view :style="{height:tdListHeight+'px'}" class="listContainer" v-show="!isTable">
			<view class="tdListItem" v-for="(item,index) in clientList" :key="index" :style="{ display:(isLookMore === index) ? 'table':'table'}">
				<view @tap="selectClient(index)" class="left-contain">
					<view class="ClientTitle">{{item.ClientName}}</view>
					<view>编号:{{item.ClientCode}}</view>
					<view class="clientItemShow">
						<text>电话:{{item.Phone}}</text>
						<text>联系人:{{item.Contacts}}</text>
					</view>
					<view>地址:{{item.Address}}</view>
				</view>
				<view class="sortIndex">{{index+1}}</view>

			</view>
		</view>
		<view class="options">
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">设置表格列宽度</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<view class="padding-xl-item" v-for="(item,index) in clientTitleList" :key="item.name">
							<text>{{item.name}}:</text><input v-model="clientSettingTempList[index]" type="number"/>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
							<button class="cu-btn bg-green margin-left" @tap="sureSetting">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	//速云公共接口
	import * as utilsApi from '@/syApis/syUtilsApi/utisl.js';
	export default {
		data() {
			return {
				//搜索条件
				inputStr: "",
				//表头列表
				clientTitleList: [{
					name: "序号",
					isShow: true
				}, {
					name: "供应商名称",
					isShow: true
				}, {
					name: "供应商编号",
					isShow: true
				}, {
					name: "地址",
					isShow: true
				}, {
					name: "电话",
					isShow: true
				}],
				//表头宽度列表
				clientSettingWidthList: [50, 100, 100, 100, 100],
				//设置表头宽度临时列表
				clientSettingTempList: [50, 100, 100, 100, 100],
				//表格内容显示部分高度
				tdHeight: 0,
				//数据展示部分高度
				tdListHeight: 0,
				//供应商or客户列表
				clientList: [],
				//判读是否供应商
				isClient: false,
				//是否展开
				isLookMore: -1,
				//是否展示表格
				isTable: false,
				//弹框展示
				modalName: null,
				// 搜索框提示的文字
				inputplaceholder:'',
				status:false
			}
		},
		methods: {
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeShow();
				} else if (index == 1) {
					this.showModal();
				}
			},
			//显示弹框
			showModal() {
				this.modalName = "Modal"
			},
			//隐藏弹框
			hideModal(e) {
				this.modalName = null;
				this.clientSettingTempList = this.clientSettingWidthList;
			},
			sureSetting() {
				let tempList = [];
				this.clientSettingTempList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingWidthList = tempList;
				this.modalName = null;
			},
			//获取供应商or客户or往来单位
			Get_ClientMessage(Filter = '') {
				let data = {};
				if (this.isClient == 0) {
					data = {
						Filter: "IsClient<>0" + Filter
					};
				} else if (this.isClient == 1) {
					data = {
						Filter: "IsClient<>1" + Filter
					};
				} else {
					data = {
						Filter: Filter
					};
				
				}
				var that = this;
				utilsApi.Get_ClientMessage(data, function(res) {
					//请求成功
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != '') {

						} else {
							if(res.data.ResultMsg.length==0){
								utilsApi.showTip("查无数据");
							}else{
								utilsApi.showTip("查询成功");
							}
							that.clientList = res.data.ResultMsg;
							that.inputStr = "";
						}
					} else {

					}
				});
			},
			//查看更多
			lookMore(index) {
				if (index == this.isLookMore) {
					this.isLookMore = -1;
				} else {
					this.isLookMore = index;
				}
			},
			//选择供应商or客户
			selectClient(index) {
				//拿到选择的供应商条目
				let ClientItem = JSON.stringify(this.clientList[index]);
				//返回监听
				this.$eventHub.$emit('clientListen', ClientItem);
				uni.navigateBack({
					delta: 1
				})
			},
			//修改展示方式
			changeShow() {
				this.isTable = !this.isTable;
			},
			//搜索
			search() {
				if(this.status == false){
					this.status == true
					let screenHeight = uni.getSystemInfoSync().windowHeight;
					//数据展示部分的高度
					this.tdListHeight = screenHeight - 50;
					//表格除表头部分数据的展示
					this.tdHeight = screenHeight - 90;
				}
				if (this.inputStr != "") {
					let Filter = "";
					if(this.isClient!=2){
					 Filter = " and ClientName like '%" + this.inputStr + "%' or ClientCode like '%" + this.inputStr + "%'";
					}else{
						 Filter = "ClientName like '%" + this.inputStr + "%' or ClientCode like '%" + this.inputStr + "%'";
					}
			
					this.Get_ClientMessage(Filter);
				} else {
					this.Get_ClientMessage();
				}
			}
		},
		created() {
			// let screenHeight = uni.getSystemInfoSync().windowHeight;
			// //数据展示部分的高度
			// this.tdListHeight = screenHeight - 50;
			// //表格除表头部分数据的展示
			// this.tdHeight = screenHeight - 90;
			// // this.Get_ClientMessage();
			
		},
		// onShow() {
		// 	let screenHeight = uni.getSystemInfoSync().windowHeight;
		// 	//数据展示部分的高度
		// 	this.tdListHeight = screenHeight - 50;
		// 	//表格除表头部分数据的展示
		// 	this.tdHeight = screenHeight - 90;
		// 	// this.Get_ClientMessage();
		// },
		onLoad(options) {
			//是否供应商
			this.isClient = options.isClient;
			let tip = "";
			let pla = "";
			if (this.isClient == 1) {
				uni.setNavigationBarTitle({
					title: "选择供应商"
				});
				tip = "请点击搜索按钮查询供应商";
				pla = '请输入供应商名称/编号';
				
			} else if (options.isClient == 0) {
				uni.setNavigationBarTitle({
					title: "选择客户"
				})
				tip = "请点击搜索按钮查询客户";
				pla = '请输入客户名称/编号';
			} else {
				uni.setNavigationBarTitle({
					title: "选择往来单位"
				})
				tip = "请点击搜索按钮查询往来单位";
				pla = '请输入往来单位名称/编号';
			}
			utilsApi.showTip(tip);
			this.inputplaceholder = pla;
		},
		computed: {
			//表头总宽度
			allWidth() {
				let allClietnWidth = 0;
				this.clientSettingWidthList.forEach(item => {
					allClietnWidth += parseFloat(item);
				})
				return allClietnWidth;
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
		font-family: "宋体";
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.clientWrapper {
		width: 100%;
		height: 100%;
	}

	.clientSearchItem {
		width: 100%;
		height: 50px;
		display: flex;
		box-sizing: border-box;
		padding: 7.5px 5px 0px 5px;
	}

	.clientSearchItem .clientSearch {
		flex: 1;
		height: 35px;
		line-height: 35px;
		border-radius: 5px;
		border: 1px solid #ccc;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		padding-left: 8px;
		font-size: 14px;
	}

	.clientSearchItem .searchBt {
		width: 60px;
		height: 35px;
		line-height: 35px;
		font-size: 15px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		background-color: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.options {
		width: 100%;
		height: 0px;
		display: flex;
		border-top: 1px solid #ccc;
	}

	.options button {
		padding-left: 12px;
		padding-right: 12px;
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		margin-top: 5px;
		background: rgba(124, 170, 216, 1);

		color: #FFF;
		box-sizing: border-box;

	}

	.container {
		width: 100%;
		overflow: auto;
	}

	.container .tdHeader {
		height: 40px;
		line-height: 40px;
		background: rgba(124, 170, 216, 1);
		box-sizing: border-box;
		display: flex;
	}

	.container .tdHeader .tdTh {
		box-sizing: border-box;
		min-height: 40px;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1rpx solid #ccc;
		padding-left: 4px;
		padding-right: 4px;
		overflow: auto;
		color:#FFF;
		text-align: center;
	}

	.tdContain {
		overflow: auto;
	}

	.tdContain .tdItems {
		text-align: center;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
     
	.tdContain .tdItems.tdItem {
		display: block;
		box-sizing: border-box;
		min-height: 40px;
		line-height: 40px;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1rpx solid #ccc;
		padding-left: 4px;
		padding-right: 4px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		
	}

	.listContainer {
		width: 100%;
		overflow-x: hidden;
	}

	.listContainer .tdListItem {
		width: 95%;
		margin: auto;
		margin-bottom: 5px;
		border-radius: 5px;
		border: 1px solid #ebebeb;
		padding-left: 8px;
		padding-right: 45px;
		box-sizing: border-box;
		position: relative;
		height: 70px;
		overflow: hidden;
	}

	.listContainer .tdListItem.more {
		display: table;
	}

	.listContainer .tdListItem view {
		padding-top: 2px;
		padding-bottom: 2px;
		line-height: 20px;
	}
	.listContainer .tdListItem .left-contain{
		 width: 100%;
		 overflow: hidden;
	}

	.listContainer .tdListItem .clientItemShow {
		display: flex;
	}

	.listContainer .tdListItem .ClientTitle {
		font-size: 16px;
		font-weight: bold;
	}

	.listContainer .tdListItem .clientItemShow text {
		flex: 1;
	}

	.listContainer .tdListItem .sortIndex {
		padding: 0px 5px;
		position: absolute;
		right: 5px;
		top: 5px;
		border-radius: 2px;
		background: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.listContainer .tdListItem .lookMore {
		width: 20px;
		height: 20px;
		background: url(../../static/pullMore.png) no-repeat;
		position: absolute;
		right: 5px;
		bottom: 5px;
		border-radius: 2px;
		color: #FFF;
		padding: 0px 5px;
	}

	.padding-xl-item {
		display: flex;
	}

	.padding-xl-item text {
		min-width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: right;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.padding-xl-item input {
		flex: 1;
		border: 1px solid #CCC;
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
	}
</style>
